<template>
  <div id="lately">
    <div class="title">
      <span>最近播放</span>
      <span v-show="songlist.length">共{{songlist.length}}首</span>
      <span @click="clear">清空列表</span>
    </div>
    <!-- <button @click="playAll">添加到列表</button> -->
    <div class="tablelist">
      <ul>
        <li id="biaoti">
          <span></span>
          <span>音乐列表</span>
          <span>歌手</span>
          <span>播放时间</span>
        </li>
        <li v-for="(s, index) of songlist" :key="index" @click="play(s.id)">
          <span>{{ index + 1 }}</span>
          <span>{{ s.name }}</span>
          <span>{{ s.ar }}</span>
          <span>{{ s.time }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Lately",
  data() {
    return {
      songlist: [],
    };
  },
  computed: {
    ...mapState("songAbout", ["index", "singinglist"]),
  },
  methods: {
    play(id) {
      //遍历当前播放列表数组，查看点击的歌曲是否存在当前歌单
      let result = this.singinglist.findIndex((item) => {
        return item.id === id;
      });
      if (result == -1) {
        //当前播放列表不包含该歌曲,则添加到当前列表
        axios
          .get("http://localhost:8013/api/song/detail?ids=" + id)
          .then((res) => {
            this.singinglist.splice(this.index + 1, 0, res.data.songs[0]);
            this.$store.dispatch("songAbout/playsongid", this.index + 1);
          });
      } else {
        //当前播放列表包含该歌曲
        this.$store.dispatch("songAbout/playsongid", result);
      }
    },
    clear() {
      this.songlist = [];
      localStorage.removeItem("singHistory");
    },
    // playAll(){
    //   // this.songlist.forEach(e => {
    //   //   axios.get("http://localhost:8013/api/song/detail?ids=" + e.id).then(
    //   //     res=>{
    //   //       console.log(res);
    //   //     }
    //   //   )
    //   // });
    //   this.$store.dispatch("songAbout/replaceOneByOne",this.songlist)
    //    //加载音乐
    //   this.$store.dispatch("songAbout/playsongid", 0);
    //   //改变状态
    //   this.$store.commit("songAbout/CHANGE",true)
    // },
  },
  activated() {
    this.songlist = JSON.parse(localStorage.getItem("singHistory"));
    console.log(this.songlist.length);
  },
};
</script>

<style scoped>
#lately {
  padding-bottom: 80px;
  line-height: 20px;
  text-align: left;
}
.title {
  height: 60px;
  line-height: 60px;
  text-align: left;
  padding: 0 50px 0 20px;
}
.title span:nth-child(1) {
  font-weight: 600;
  font-size: 20px;
}
.title span:nth-child(2) {
  margin-left: 20px;
  font-size: 14px;
  color: #888;
}
.title span:nth-child(3) {
  float: right;
  color: blue;
  font-size: 14px;
}
button {
  background: steelblue;
  text-align: center;
  border-radius: 20px;
  width: 120px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  margin-left: 10px;
  margin: 10px;
  border: none;
}
.tablelist {
}
li {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #fff;
}
li span {
  display: inline-block;
  padding: 0 10px;
  height: 40px;
  font-size: 14px;
  color: #666;
  overflow: hidden;
}
li span:nth-child(1) {
  width: 5%;
  text-align: center;
  color: #aaa;
}
li span:nth-child(2) {
  width: 48%;
}
li span:nth-child(3) {
  width: 22%;
}
li span:nth-child(4) {
  width: 10%;
}
#biaoti span {
  font-weight: 600;
}
ul li:nth-of-type(even) {
  background: #f0f0f0;
}
</style>